<html>
    <head>
        <title>
            使用JavaScript代替模板功能
        </title>
    </head>
    <body>
        <script>
            // 四、使用JavaScript代替模板功能

                                // 1、 v-if 和 v-for
                                            /*
                                                只要再要再原生的JavaScript中可以轻松完成的操作，Vue的渲染函数就不会提供专有的替代方法。

                                                比如，在模板中使用的 v-if 和 v-for ：

                                                    <ul v-if ="items.length">
                                                        <li v-for="item in items">{{item.name}}</li>
                                                    </ul>
                                                    <p v-else></p>
                                            */

                                            // 这些都可以在渲染函数中用JavaScript的 if / else 和 map 来重写：

                                            props:['items'],
                                                    render:functionc(createElement){
                                                        if(this.items.length){
                                                            return createElement('ul',this.items.map(funciton(item){
                                                                return createElement('li',item.name );
                                                            }))
                                                        }
                                                    }



                                // 2、v-model
                                            /*
                                                渲染函数中没有与 v-model 的直接对应----你必须自己实现相应的逻辑：
                                            */
                                                    props:['value'],
                                                    render:function(createElement){
                                                        var self = this;
                                                        return createElemetn('input',{
                                                            // DOM属性绑定
                                                            domProps:{
                                                                value:self.value
                                                            },
                                                            // 事件监听器绑定
                                                            on:{
                                                                input:function(event){
                                                                    self.$emit('input',event.target.value)
                                                                }
                                                            }
                                                        })
                                                    }

                                            // 这就是深入底层的代价，但与 v-model 相比，这可以让你更好地控制交互细节。


                                // 3、事件 & 按键修饰符
                                            /*
                                                对于 .parent 、 .capture 和 .once 这些事件修饰符， Vue 提供了相应的前缀可以用于 on:

                                                以下是对照表:

                                                    修饰符                 前缀
                                                    .passive               &
                                                    .capture               !
                                                    .once                  ~
                                                    .capture.once          ~!
                                                    或者 
                                                    .once.caputre
                                            */
                                            // 例如：
                                                    on:{
                                                        '!click':this.doThisInCapturingMode,
                                                        '~keyup':this.doThisOnce,
                                                        '~!mouseover':this.doThisOnceInCapturingMode
                                                    }

                                            // 对于所有其他的修饰符，私有前缀都不是必须的，因为你可以在时间处理函数中使用 "JS的事件方法"：
                                            /*
                                                    修饰符                                   处理函数中的等价操作
                                                    .stop                                   event.stopPropagation()  阻止事件冒泡
                                                    .prevent                                event.preventDefault()   阻止默认行为
                                                    .self                                   if(event.target !== event.currentTarget) return  只当事件在该元素本身触发时才触发回调
                                                    
                                                    按键：
                                                    .enter , .13                            if(!event.ctrKey) return （对于别的按键修饰符来说，可以将13改为另一个按键码）
                                                    
                                                    修饰键：
                                                    .ctrl ， .alt, .shift, .meta            if(!event.ctrlKey) return （将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey）
                                            */      
                                            
                                            // 这里是一个实用所有修饰符的例子：
                                                on: {
                                                        keyup: function (event) {
                                                            // 如果触发事件的元素不是事件绑定的元素
                                                            // 则返回
                                                            if (event.target !== event.currentTarget) return
                                                            // 如果按下去的不是 enter 键或者
                                                            // 没有同时按下 shift 键
                                                            // 则返回
                                                            if (!event.shiftKey || event.keyCode !== 13) return
                                                            // 阻止 事件冒泡
                                                            event.stopPropagation()
                                                            // 阻止该元素默认的 keyup 事件
                                                            event.preventDefault()
                                                            // ...
                                                        }
                                                }

                                // 4、插槽
                                          // 你可以通过 this.$slots 访问"静态插槽"的内容，每个插槽都是一个 VNode 数组。
                                                render:function(createElement){
                                                    // <div><slot></slot></div>
                                                    return createElement('div',this.$slots.default)
                                                }

                                          // 也可以通过this.$scopeedSlots 访问"作用域插槽"，每个作用域插槽都是一个返回"若干VNode"的函数：
                                                props:['message'],
                                                render:function(createElement){
                                                    // <div><slot :text="message"></slot></div>
                                                    return createElement('div',[
                                                        this.$scopedSlots.default({
                                                            text:this.message
                                                        });
                                                    ])
                                                }

                                          // 如果要用渲染函数向子组件中传递作用域插槽，可以利用VNode数据对象中的 scopedSlots 字段：
                                                render:function(createElement){
                                                    // <div> <child v-slot="props"> <span>{{porps.text}}</span> </child> </div>
                                                    return createElement('div',[
                                                        createElement('child',{
                                                            // 在数据云插槽中传递作用域插槽
                                                            // 格式为 {name : props =>VNode | Array<VNode>}
                                                            scopedSlots:{
                                                                default:fuction(props){
                                                                    return createElement('span',props.text)
                                                                }
                                                            }
                                                        })
                                                    ])
                                                }

        </script>
    </body>
</html>